<!--
 * @Author: lxy
 * @Date: 2021-12-22 16:47:18
 * @LastEditTime: 2022-01-14 17:02:53
 * @Description: 支付账单页面
 * @FilePath: /vue2-project/src/view/payBill/index.vue
-->
<template>
	<div class="payBill">
		<template v-if="!showTable">
			<div class="header">
				<el-date-picker
					v-model="daterange"
					format="yyyy 年 MM 月 dd 日"
					value-format="yyyy-MM-dd"
				>
				</el-date-picker>
				<el-button
					type="primary"
					style="margin-left: 15px"
					@click="handlerSearch"
					>查询</el-button
				>
			</div>
			<div class="titleBill">
				<span
					>总计收款：<span style="color: red">{{
						totalCountRechargeAmount
					}}</span>
					元</span
				>
				<span style="margin-left: 25px"
					>总计退款：<span style="color: red">{{
						totalCountRefundAmount
					}}</span>
					元</span
				>
			</div>
			<div class="type">
				<el-card class="left">
					<div slot="header" class="clearfix">
						<span>小程序账单</span>
						<el-button
							style="float: right; padding: 3px 0"
							type="text"
							@click="handlerSeachBillByType(0)"
							>详情</el-button
						>
					</div>
					<div>
						总计收款：<span style="color: red">{{
							miniAppPay.rechargeAmount
						}}</span>
						元
					</div>
					<div>
						总计退款：<span style="color: red">{{
							miniAppPay.refundAmount
						}}</span>
						元
					</div>
				</el-card>
				<el-card class="right">
					<div slot="header" class="clearfix">
						<span>His账单</span>
						<el-button
							style="float: right; padding: 3px 0"
							type="text"
							@click="handlerSeachBillByType(1)"
							>详情</el-button
						>
					</div>
					<div>
						总计收款：<span style="color: red">{{
							hisAppPay.rechargeAmount
						}}</span>
						元
					</div>
					<div>
						总计退款：<span style="color: red">{{
							hisAppPay.refundAmount
						}}</span>
						元
					</div>
				</el-card>
			</div>
		</template>
		<template v-else>
			<el-button
				type="primary"
				size="mini"
				style="margin-bottom: 15px"
				@click="handlerBack"
				>返回</el-button
			>
			<shyt-table
				ref="shytTable"
				:columns="columns"
				:data="tableData"
				:auto-resize="true"
				:keep-source="true"
				style="margin-bottom: 15px"
			>
				<!-- <template #toolbar_buttons>
					<el-input
						v-model="query"
						placeholder="请输入"
						size="small"
						style="width: 200px"
						clearable
						@keyup.enter.native="handlerSearchByName"
					>
						<el-button
							slot="append"
							icon="el-icon-search"
							@click="handlerSearchByName"
						/>
					</el-input>
				</template> -->
				<template #orderRefundStatus="{ row }">
					{{ checkWxSatus(row) }}
				</template>
			</shyt-table>
		</template>
	</div>
</template>

<script>
import { getSysDataDictList } from '@/http/dict'
import { billAmount, orderDetail } from '@/http/payBill'
import { formatDateTime, formatDate } from '@/filters/time.js'
export default {
	data() {
		return {
			daterange: '',
			showTable: false,
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
			},
			miniAppPay: {
				refundAmount: 0,
				rechargeAmount: 0,
			},
			hisAppPay: {
				refundAmount: 0,
				rechargeAmount: 0,
			},
			query: '',
			type: 0, //0 miniqpp 1 his
			pageConfig: {
				currentPage: 1,
				pageSize: 10,
				pageSizes: [10, 20, 30, 50],
				total: 0,
				background: true,
				layouts: [
					'PrevPage',
					'JumpNumber',
					'NextPage',
					'FullJump',
					'Sizes',
					'Total',
				],
			},
			orderRefundStatusOp: [],
			typeOp: [],
			tableData: [],
			$table: null,
			columns1: [
				{
					field: 'wechatOrderNo',
					title: '微信订单编号',
				},
				{
					field: 'tradeName',
					title: '订单描述',
				},
				{
					field: 'wxTransactionTime',
					title: '交易日期',
					formatter: ({ cellValue }) => {
						return formatDateTime(cellValue)
					},
				},
				{
					field: 'orderAmount',
					title: '交易金额(元)',
				},
				{
					field: 'orderRefundStatus',
					title: '订单状态',
					slots: { default: 'orderRefundStatus' },
					// formatter: ({ cellValue }) => {
					// 	return this.orderRefundStatusOp[cellValue] || ''
					// },
				},
			],
			columns2: [
				{
					field: 'serialNo',
					title: '微信订单编号',
				},
				// {
				// 	field: 'tradeName',
				// 	title: '订单描述',
				// },
				{
					field: 'billDate',
					title: '交易日期',
					formatter: ({ cellValue }) => {
						return formatDateTime(cellValue)
					},
				},
				{
					field: 'charges',
					title: '交易金额(元)',
				},
				{
					field: 'type',
					title: '收费类型',
					formatter: ({ cellValue }) => {
						let res = this.typeOp.find(i => i.value == cellValue)
						return res ? res.display : ''
					},
				},
				{
					field: 'billType',
					title: '订单状态',
					// slots: { default: 'orderRefundStatus' },
					formatter: ({ cellValue }) => {
						let res = this.orderRefundStatusOp.find(i => i.value == cellValue)
						return res ? res.display : ''
					},
				},
			],
		}
	},
	computed: {
		columns() {
			return this.type == 0 ? this.columns1 : this.columns2
		},
		totalCountRechargeAmount() {
			return (
				parseFloat(this.miniAppPay.rechargeAmount) +
				parseFloat(this.hisAppPay.rechargeAmount)
			)
		},
		totalCountRefundAmount() {
			return (
				parseFloat(this.miniAppPay.refundAmount) +
				parseFloat(this.hisAppPay.refundAmount)
			)
		},
	},
	created() {
		this.daterange = formatDate(new Date())
		this.billAmount()
		this.getSysDataDictList()
	},
	mounted() {},
	methods: {
		getSysDataDictList() {
			getSysDataDictList({ type: 'SP_HISBILLTYPE_CODE' }).then(({ data }) => {
				if (data.head.code == 200) {
					this.orderRefundStatusOp = data.data
				}
			})
			getSysDataDictList({ type: 'SP_HISTYPE_CODE' }).then(({ data }) => {
				if (data.head.code == 200) {
					this.typeOp = data.data
				}
			})
		},
		checkWxSatus(row) {
			// console.log(row)
			// return
			if (row.tradingStatus === 'SUCCESS') {
				return '已支付'
			} else if (row.tradingStatus === 'REFUND') {
				return '已退款'
			} else {
				return ''
			}
		},
		billAmount() {
			billAmount({
				startDateStr: this.daterange + ' 00:00:00',
				endDateStr: this.getDateStr(1, this.daterange) + ' 00:00:00',
			}).then(({ data }) => {
				// console.log(res)
				// console.log(data)
				if (data && data.head.code == 200 && data.data) {
					this.miniAppPay.rechargeAmount = parseFloat(
						data.data.wxBillList[0].paySuccessTotal,
					)
					this.hisAppPay.rechargeAmount = parseFloat(
						data.data.hisBillList[0].payCosts,
					)
					this.miniAppPay.refundAmount = -parseFloat(
						data.data.wxBillList[0].refundSuccessTotal,
					)
					this.hisAppPay.refundAmount = parseFloat(
						data.data.hisBillList[0].refundCosts,
					)
				}
			})
		},
		handlerBack() {
			this.showTable = false
			this.query = ''
		},
		handlerGetRow() {},
		handlerSearchByName() {
			if (this.type) {
				// his
			} else {
				this.miniappOrderDetail()
			}
		},
		handlerSearch() {
			this.billAmount()
		},
		// 翻页事件
		pageChange({ currentPage, pageSize }) {
			this.pageConfig.currentPage = currentPage
			this.pageConfig.pageSize = pageSize
			if (this.type) {
				// his
			} else {
				this.miniappOrderDetail()
			}
		},
		getDateStr(AddDayCount, time) {
			let dd = time ? new Date(time) : new Date()
			dd.setDate(dd.getDate() + AddDayCount) //获取AddDayCount天后的日期
			let y = dd.getFullYear()
			let m = dd.getMonth() + 1 //获取当前月份的日期
			let d = dd.getDate()
			//判断 月
			if (m < 10) {
				m = '0' + m
			}
			//判断 日n
			if (d < 10) {
				//如果天数<10
				d = '0' + d
			}
			return y + '-' + m + '-' + d
		},
		handlerSeachBillByType(type) {
			// console.log(type)
			this.type = type
			this.showTable = true
			this.pageConfig.currentPage = 1
			this.pageConfig.pageSize = 10
			// if (type) {
			// his
			// } else {
			this.miniappOrderDetail()
			// }
			this.$nextTick(() => {
				this.$table = this.$refs.shytTable.$refs.xTable
			})
		},
		miniappOrderDetail() {
			orderDetail({
				// desriptionOrOrderNo: this.query,
				// pageNum: this.pageConfig.currentPage,
				// pageSize: this.pageConfig.pageSize,
				startDateStr: this.daterange + ' 00:00:00',
				endDateStr: this.getDateStr(1, this.daterange) + ' 00:00:00',
			}).then(({ data }) => {
				if (data.head.code == 200) {
					if (this.type) {
						this.tableData = data.data.hisBillDetailList
					} else {
						this.tableData = data.data.wxBillDetailList
					}
					// this.tableData = data.data.records
					// this.pageConfig.total = data.data.total
				}
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.payBill {
	padding: 10px;
	box-sizing: border-box;
	height: 100%;
	.header {
		display: flex;
		align-items: center;
		height: 50px;
	}
	.titleBill {
		margin-top: 15px;
		display: flex;
		justify-content: center;
	}
	.type {
		margin-top: 25px;
		display: flex;
		justify-content: center;
		.left {
			margin-right: 25px;
		}
		.left,
		.right {
			width: 40%;
		}
	}
}
</style>
